<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>添加</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/admin/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="/admin/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="/admin/css/animate.min.css" rel="stylesheet">
    <link href="/admin/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="/admin/frame/layer/css/layui.css" rel="stylesheet">

</head>
<body>
<div class="container-fluid" style="margin-top: 30px;height: 100%" >
    <div class="row" style="height: 100%">
        <div class="col-sm-12 col-md-12">
            <form class="form-horizontal" id="addForm" action="/Admin/Device/DeviceArea/saveOrUpdate">
                <c:if test="${deviceArea!=null}">
                    <div class="form-group col-sm-6">
                        <label class="col-sm-4 control-label"><span style="color: red">*</span>编号：</label>
                        <div class="col-sm-8">
                            <input id="id" readonly type="text" value="${deviceArea.id}" name="id" class="form-control" placeholder="请输入编号">
                        </div>
                    </div>
                </c:if>
                <div class="form-group col-sm-6">
                    <label class="col-sm-4 control-label"><span style="color: red">*</span>区域名称：</label>
                    <div class="col-sm-8">
                        <input id="areaName" value="${deviceArea.areaName}" type="text" name="areaName" class="form-control" placeholder="请输入停靠区域名称">
                    </div>
                </div>
                <div class="form-group col-sm-6">
                    <label class="col-sm-4 control-label"><span style="color: red">*</span>纬度：</label>
                    <div class="col-sm-8">
                        <input type="number" value="${deviceArea.lat}" id="lat" readonly name="lat" class="form-control" placeholder="请输入纬度">
                    </div>
                </div>
                <div class="form-group col-sm-6">
                    <label class="col-sm-4 control-label"><span style="color: red">*</span>半径：</label>
                    <div class="col-sm-8">
                        <input value="${deviceArea.radius}" type="text" min="3" id="radius" name="radius" class="form-control" placeholder="请输入半径">
                    </div>
                </div>
                <div class="form-group col-sm-6">
                    <label class="col-sm-4 control-label"><span style="color: red">*</span>经度：</label>
                    <div class="col-sm-8">
                        <input type="text" value="${deviceArea.lng}"  id="lng" readonly name="lng" class="form-control" placeholder="请输入经度">
                    </div>
                </div>
            </form>
        </div>
        <div class="col-sm-12 col-md-12"  style="height: 100%;padding-bottom: 98px;">
            <div  id="container"   style="height: 100%;">

            </div>
        </div>
    </div>
</div>

</body>
<script src="/admin/frame/jquery/jquery-1.9.1.min.js"></script>
<script src="/admin/frame/bootstrap/js/bootstrap.min.js"></script>
<script src="/admin/js/content.min.js?v=1.0.0"></script>
<script src="/admin/frame/jquery-validate/jquery.validate.min.js"></script>
<script src="/admin/frame/jquery-validate/messages_zh.min.js"></script>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<script>
    $().ready(function() {
        $("#addForm").validate();
    });
    $(function(){
        var lat=$("#lat").val();
        var lng=$("#lng").val();
        var radius=$("#radius").val();
        if(radius==undefined||radius=="")
        {   radius=3;
            $("#radius").val(3);
        }else{
            radius=parseInt(radius);
        }
        var marker;
        var cirle;
        var map = new qq.maps.Map(document.getElementById("container"), {
            // 地图的中心地理坐标。
            center: new qq.maps.LatLng(29.3546673416,105.9371173382),
            zoom: 18,//缩放级别
        });
        if(lat!=""&&lng!="")
        {
            var lnglat= new qq.maps.LatLng(parseFloat(lat),parseFloat(lng));
            loadMark(lnglat);
        }
        qq.maps.event.addListener(
            map,
            'click',
            function(event) {
                var lnglat= new qq.maps.LatLng(event.latLng.getLat(),event.latLng.getLng());
                loadMark(lnglat);
            }
        );
        //加载标记
        function loadMark(latlng) {
            map.setCenter(latlng);
            if(marker==null)
            {
                marker = new qq.maps.Marker({
                    position: latlng,
                    draggable: true,
                    map: map
                });
                addEvent();
            }else{
                marker.setPosition(latlng);
            }
            if(cirle==null)
            {
                cirle= new qq.maps.Circle({
                    center:latlng,
                    radius:radius,
                    map: map,
                    strokeWeight:1
                });
            }else{
                cirle.setCenter(latlng);
                cirle.setRadius(radius);
            }
            $("#lat").val(latlng.getLat());
            $("#lng").val(latlng.getLng());
        }
        //添加搜索定位事件
        $("#areaName").on("input",function () {
            codeAddress($(this).val());
        })
        $("#radius").on("input",function(){
            if(cirle!=null)
            {   radius=$(this).val();
                if(radius==undefined||radius=="")
                {
                    radius=3;
                }else{
                    radius=parseInt(radius);
                }
                cirle.setRadius(radius);
            }
        })
        geocoder = new qq.maps.Geocoder();
        function codeAddress(address) {
            //对指定地址进行解析
            geocoder.getLocation(address);
            //设置服务请求成功的回调函数
            geocoder.setComplete(function(result) {
                loadMark(result.detail.location);
            });
            //若服务请求失败，则运行以下函数
            geocoder.setError(function() {
                // alert("出错了，请输入正确的地址！！！");
            });
        }
        function addEvent() {
            qq.maps.event.addListener(marker, 'dragend', function(event) {
                var lnglat= new qq.maps.LatLng(event.latLng.getLat(),event.latLng.getLng());
                loadMark(lnglat);
            });
        }
    })
</script>
</html>
